import React from 'react'
import {render} from 'react-dom'
import F from 'lodash/fp'
import {connect,Provider} from 'react-redux'
import {coverChange, $cropperModal} from '../actions/content-change'
import Cropper from './cropper.jsx'
import {store} from '../store'

let cropper

class Modal extends React.Component {
    constructor(props) {
        super(props)
    }

    shouldComponentUpdate(nextProps) {
        return nextProps.isReady
    }

    render () {
        let photo = this.props.getPhoto()
        return (
            <div className="am-modal-dialog couple-modal-dialog">
                <div className="am-modal-hd couple-modal-hd">
                    <a href="javascript: void(0)" className="am-close-spin map-close" data-am-modal-close>&times;</a>
                    <span className="title-b">裁剪</span>
                </div>
                <div className="am-modal-bd h-paddin-zero">
                    <div style={{maxHeight: '400px', maxWidth: '600px', minHeight: '400px', minWidth: '400px'}}>
                        <Cropper src={photo ? photo.path + '/raw' : ''} ratio={1} ready={c => cropper = c} />
                    </div>
                    <div className="map-btn-wp couple-modal-btn">
                        <button 
                            className="edit-box-btn change-cover-bd-btn edit-save"
                            data-am-modal-close
                            onClick={() => this.props.croped(photo.path)}
                        >
                            确定
                        </button>
                        <button className=" edit-box-btn change-cover-bd-btn change-cover-bd-quit" data-am-modal-close>取消</button>
                    </div>
                </div>
            </div>
        )
    }
}

let Cover = props => {
    return (
        <div className="change-cover-img avatar-view">
            <img className="change-img" src={props.coverSrc ? props.coverSrc : "/home/images/edit/change-cover-bg.jpg"} />
            <button
                className="change-cover-img-btn"
                type="button"
                data-am-modal="{target: '#change-editable-pic'}"
                onClick={() => props.crop($('#cover-modal'))}
            >
                更换封面
            </button>
        </div>
    )
}

let Cover1 = props => {
    return (
        <div>
            <img src={props.coverSrc ? props.coverSrc : "/home/images/edit/change-cover-bg.jpg"} alt="" />
            <div className="invit-title-txt"
                data-am-modal="{target: '#change-editable-pic'}"
                onClick={() => props.crop($('#cover-modal'))}
            >
                更新封面
            </div>
        </div>
    )
}
if (window.MODE == 'card') {
    Cover = connect(
        ({global:{cover}}) => ({
            coverSrc: cover
        })
        , (dispatch, props) => ({
            crop: F.compose(dispatch, $cropperModal)
        })
    )(Cover)
    
    Cover1 = connect(
        ({global:{cover}}) => ({
            coverSrc: cover
        })
        , (dispatch, props) => ({
            crop: F.compose(dispatch, $cropperModal)
        })
    )(Cover1)
    Modal = connect(
        ({card: state, gallery, global}) => ({
            getPhoto: () => F.find(['id', gallery.selectedId], gallery.photos),
            isReady: !!global.cropperReady
        })
        , (dispatch, props) => ({
            croped: (src) => {
                let {x, y, width, height} = cropper.cropper('getData')
                console.log(x, y, width, height);
                [x, y, width, height] = [x, y, width, height].map(Math.ceil)
                const content = `${src}/${width}x${height}_${x}x${y}_${360}`
                dispatch(coverChange(content))
            }
        })
    )(Modal)

    render(<Provider store={store}><Modal /></Provider>, document.getElementById('cover-modal'))
    render(<Provider store={store}><Cover /></Provider>, document.getElementById('crop-avatar'))
    render(<Provider store={store}><Cover1 /></Provider>, document.querySelector('.invit-title-img'))
}